<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{count }}</strong></span>
    <ul class="filters">
      <li>
        <a href="javascript:;" :class="{selected: isSel === 'all'}"  @click="isSel='all'">全部</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected: isSel === 'no'}"  @click="isSel='no'">未完成</a>
      </li>
      <li>
        <a href="javascript:;" :class="{selected: isSel === 'yes'}"  @click="isSel='yes'">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clearFun">清除已完成</button>
  </footer>
</template>

<script>
export default {
   computed:{
    count(){
         if(this.$store.state.isSel==='yes'){
        return this.$store.state.list.filter(item=>item.isDone).length;
      }else if(this.$store.state.isSel==='no'){
        return this.$store.state.list.filter(item=>!(item.isDone)).length;
      }else{
         return this.$store.state.list.length
      }
    }
   },
   data(){
    return{
       isSel: 'all'
    }
   },
   watch:{
    isSel:{
      deep:true,
      immediate:true,
      handler(val){
      this.$store.commit('updateIsSel',val)
      }
    }
   },
   methods:{
    clearFun(){
      const arr = this.$store.state.list.filter(item=>!(item.isDone))
      console.log(arr);
      this.$store.commit('updateList',arr)
    }
   }
}
</script>
